<template>
  <div ref="type" class="count type_2"
       :class="className"
  >
    <div class='unit'>
      RMB
    </div>
    <div class='computed_title'>
      累计收入
    </div>
    <h1>111,111,111</h1>
  </div>
</template>

<script>
export default {
  name: 'TransparentBlock',
  props: ['type'],
  data() {
    return {
      className: 'type'
    }
  },
  methods: {},
  created() {
    console.log(this.type)
    if (this.type) {
      this.className = 'type' + '_' + this.type
    }
  }
}
</script>

<style lang="less" scoped>
  .count {
    width: 320px;
    height: 160px;
    border-radius: 12px;
    margin: 0 30px 40px 30px;
    float: left;
    font: 18px 微软雅黑;
    color: white;
    padding-top: 25px;
    box-sizing: border-box;

  }

  .count > div.unit {
    float: right;

    margin-right: 30px;

  }

  .count > div.computed_title {
    margin-left: 30px;
    overflow: auto;
  }

  .count > h1 {
    margin-top: 20px;
    text-align: center;
    font-size: 48px;
  }
  .type {
    background-color: rgba(254, 120, 122, 0.9);
    box-shadow: -2px 2px 10px rgb(254, 120, 122), -20px 22px white;
  }

  .type_1 {
    background-color: rgba(54, 187, 181, 0.9);
    box-shadow: -2px 2px 10px #36bbb5, -20px 22px white;
  }

  .type_2 {
    background-color: rgba(236, 146, 224, 0.9);
    box-shadow: -2px 2px 10px rgb(236, 146, 224), -20px 22px white;
  }

  .type_3 {
    background-color: rgba(251, 187, 110, 0.9);
    box-shadow: -2px 2px 10px #fbbb6e, -20px 22px white;
  }
</style>
